<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrapper">
			<div class="tagcloud fl">
				<span id="pagetext">CSDN 玩家 1</span>
				<span id="pagetext">CSDN 玩家 2</span>
				<span id="pagetext">CSDN 玩家 3</span>
				<span id="pagetext">CSDN 玩家 4</span>
				<span id="pagetext">CSDN 玩家 5</span>
				<span id="pagetext">CSDN 玩家 6</span>
				<span id="pagetext">CSDN 玩家 7</span>
				<span id="pagetext">CSDN 玩家 8</span>
				<span id="pagetext">CSDN 玩家 9</span>
			</div>
		</div>
		<script src="../assets/js/tagcloud.js"></script>
		<script>
			tagcloud({
				selector: '.tagcloud', //元素选择器
				fontsize: 16, //基本字体大小, 单位px
				radius: 100, //滚动半径, 单位px
				mspeed: 'normal', //滚动最大速度, 取值: slow, normal(默认), fast
				ispeed: 'normal', //滚动初速度, 取值: slow, normal(默认), fast
				direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
				keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
			});
		</script>
	</body>
	<style>
		.wrapper {
			width: 50%;
			height: 300px;
			margin: 0 auto;
			margin-top: 70px;
		}

		.tagcloud {
			position: relative;
			margin-top: 0px;
		}

		.tagcloud span {
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
			display: block;
			padding: 11px 30px;
			color: #60A2FF;
			font-size: 16px;
			border: 1px solid #e6e7e8;
			border-radius: 18px;
			background-color: #f2f4f8;
			text-decoration: none;
			white-space: nowrap;
			-o-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);
			-ms-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);
			-moz-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);
			-webkit-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);
			box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";
			/*兼容ie7/8*/
			filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);
			/*strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （尽量使用数字）使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）*/
		}

		.tagcloud a:hover {
			color: #3385cf;
		}
	</style>
</html>